<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }" style="width: 80vw; margin: auto; margin-top: 50px;">
            <template #header>
                <div>
                    <el-button v-for="(button, index) in buttons" :key="index" @click=" changescenario(index)">{{ button
                    }}</el-button>
                </div>
            </template>
            <Inputstore v-if="scenario == 0"/>
            <Outputstore v-if="scenario == 1"/>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { listJob } from "../../../api/statistics/test";
import Inputstore from './compent/inputstore.vue';
import Outputstore from './compent/outputstore.vue';
//  
// 场景值 0出库统计， 1入库统计 2进销存统计 3调价统计
//  4药品销售明细 5处方药品排行 6零售药品排行
const scenario = ref(0)
// 按键组
const buttons = [
    '入库统计',
    '出库统计',
    '进销存统计',
    '调价统计',
    '药品销售明细',
    '处方药品排行',
    '零售药品排行',
]
const changescenario = (value) => {
    scenario.value =value;
   console.log(value);  
}

</script>

<style scoped>
.button-group {
    display: flex;
    border-collapse: collapse;
}

.button-group button {
    padding: 10px 20px;
    margin: 2px;
    border: none;
    background-color: #f8f9fa;
    color: #495057;
    cursor: pointer;
}

.button-group button:hover {
    background-color: #e9ecef;
}
</style>